<template>
  <div class="swiper_box">
    <!-- 轮播图 -->
    <swiper v-if="ifSwiper" class="swiping" ref="swiper" :options="swiperOption">
      <swiper-slide class="swiper-slide" v-for="(item,index) in banner_list" :key="index">
        <div
          v-show ="hiddenMobile"
          :style="{background: 'url(' + item.image_input + ') center  no-repeat', backgroundSize:'cover',width:'100%',height:'100%'}"
        ></div>
        <div
          v-show ="!hiddenMobile"
          :style="{background: 'url(' + item.image_input_m + ') center  no-repeat',backgroundSize:'cover',width:'100%',height:'100%'}"
        ></div>

        <!-- <div v-else  :style="{background: 'url(' + item.image_input_m + ') 100% 100%  no-repeat', backgroundSize:'cover  contain',width:'100%',height:'100%'}"></div> -->
        <!-- <img v-if="hiddenMobile" class="imgX" :src="item.image_input" />
        <img v-else class="imgX" :src="item.image_input_m" />-->
      </swiper-slide>
      <!-- PC 分页 -->
      <div class="swiper-pagination" slot="pagination"></div>
      <!-- 箭头左 -->
      <div id="swiper-button-prev1" class="swiper-button-prev" slot="button-prev"></div>
      <!-- 箭头右 -->
      <div id="swiper-button-next1" class="swiper-button-next" slot="button-next"></div>
      <!-- 自定义分页器 -->
    </swiper>
    <!-- 移动端 下拉加载更多 -->
    <div class="swiper_more">
      <img src="@/assets/images/swiper_mobile_more.png" alt />
      <p>下滑查看更多</p>
    </div>
  </div>
</template>
<script>
import { getSwiper } from "@/api/home.js";
export default {
  data() {
    return {
      banner_list: [],
      //首页轮播图
      swiperOption: {
        speed: 1000, //动画切换时长
        effect: "fade", //淡入
        //显示分页
        pagination: {
          el: ".swiper-pagination",
        },
        //设置点击箭头
        navigation: {
          nextEl: "#swiper-button-next1",
          prevEl: "#swiper-button-prev1",
        },
        //自动轮播
        autoplay: {
          delay: 5000,
        },
        //鼠标变成抓手型
        // grabCursor: true,
        //开启循环模式
        loop: true,
        //开启鼠标滚轮控制Swiper切换
        // mousewheel: false
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper

        on: {
          onSlideChangeEnd: function (swiper) {
            swiper.update();
            swiper.startAutoplay();
            swiper.reLoop();
          },
        },
      },
      ifSwiper: false,
      hiddenMobile:true,
    };
  },
  created() {
    //获取首页轮播图
    this.Swipert();
  },
  watch: {
    "$store.state.headTitle.equipment": {
      deep: true,
      handler: function (newValue, oldValue) {
        console.log(newValue);
        if (newValue == "pc") {
          this.hiddenMobile = true;
        } else {
          this.hiddenMobile = false;
        }
      },
    },
  },
  mounted() {
    if (this.$store.state.headTitle.equipment == "pc") {
      this.hiddenMobile = true;
    } else {
      this.hiddenMobile = false;
    }
  },
  methods: {
    //加载首页轮播图
    Swipert() {
      getSwiper().then((res) => {
        this.ifSwiper = true;
        this.banner_list = res.data.data.CHS;
      });
    },
  },
};
</script>
<style scoped src="./sass/home.css"></style>